<template>
    <div>
        <p v-if="propJson.editFlag">{{propJson.title}}</p>
        <div id="lineChartContainer" class="chartContainer" ref="lineChartContainer" :info="getChartData">

        </div>
    </div>

</template>

<script name="LineChartComponent" setup lang="ts">
import * as echarts from 'echarts';
import {doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {computed, defineProps, markRaw, nextTick, ref, watch} from 'vue';
import {sleep} from "@/utils/commonParamUtil";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let chartData = ref([]);
let chartOption = ref({});
let myChart = ref(null);

let lineChartContainer = ref(null);

let getChartData = computed(async () => {
    let awaitObj = {}
    await doThirdServiceValue(propJson.value.chartDataValue, commonParam.value, execChartDataThen, () => {}, awaitObj)
})

watch(chartData, (newValue,oldValue) => {
    if (myChart.value === null) {
        return;
    }
    let tempList = newValue
    let resSeriesList = []
    for (let index = 0; index < tempList.length; index++) {
        let tempSourceInfo = tempList[index]
        let tempInfo = {
            type: 'line',
            data: tempSourceInfo.data,
            name: "",
            smooth: false,
            areaStyle: {},
            emphasis: {}
        }
        if (propJson.value.isAddAreaStyle) {
            tempInfo.areaStyle = {};
        }
        if (propJson.value.isAddAreaLight) {
            tempInfo.emphasis = {
                focus: propJson.value.areaLightType
            }
        }
        if (propJson.value.isSmooth) {
            tempInfo.smooth = true;
        }
        // 判断是否为多数据
        if (propJson.value.isAddLegend) {
            tempInfo.name = tempSourceInfo.name
        }
        resSeriesList.push(tempInfo)
    }
    chartOption.value.series = resSeriesList;
    // 绘制图表
    myChart.value.setOption(chartOption.value);
})

function execLegendThen(res, awaitObj) {
    if (res instanceof String) {
        awaitObj.data = JSON.parse(res.replaceAll("\'", "\""));
    } else {
        awaitObj.data = res;
    }
}

function execChartDataThen(res, awaitObj) {
    chartData.value = res;
}

init();
function init() {
    nextTick(async () => {
        let opt = {
            height: propJson.value.containerHeight
        }
        if (!propJson.value.isContainerAutoWidth) {
            opt.width = propJson.value.containerWidth;
        }
        // 基于准备好的dom，初始化echarts实例
        myChart.value = markRaw(echarts.init(lineChartContainer.value, null, opt));
        let titleInfo = {
            text: propJson.value.title,
            textStyle: {
                fontSize: propJson.value.titleFontSize,
                fontWeight: 'normal'
            }
        }
        let toolTipInfo = {
            show: true,
            z: 1000000,
            trigger: propJson.value.tooltipTrigger,
            axisPointer: {
                type: propJson.value.tooltipAxisPointerType
            }
        }
        let toolboxInfo = {
            feature: {}
        }
        if (propJson.value.isAddSaveImageTool) {
            toolboxInfo.feature.saveAsImage = {
                type: propJson.value.saveImageType,
                name: propJson.value.saveImageName
            }
        }
        if (propJson.value.isAddDataZoom) {
            toolboxInfo.feature.dataZoom = {}
        }
        let gridInfo = {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        }
        let xAxis = {
            type: propJson.value.xAxisType
        }
        if (propJson.value.xAxisType === 'category') {
            let newStr = propJson.value.xAxisData.replaceAll("\'", "\"");
            xAxis.data = JSON.parse(newStr);
        }
        if (propJson.value.xAxisIsBoundaryGap) {
            if (propJson.value.xAxisType === 'category') {
                xAxis.boundaryGap = propJson.value.xAxisCategoryBoundaryGap;
            } else {
                xAxis.boundaryGap = [propJson.value.xAxisBoundaryGapLeft + '%', propJson.value.xAxisBoundaryGapRight + '%'];
            }
        }
        let yAxis = {
            type: propJson.value.yAxisType
        }
        if (propJson.value.yAxisIsBoundaryGap) {
            if (propJson.value.yAxisType === 'category') {
                yAxis.boundaryGap = propJson.value.yAxisCategoryBoundaryGap;
            } else {
                yAxis.boundaryGap = [propJson.value.yAxisBoundaryGapBottom + '%', propJson.value.yAxisBoundaryGapTop + '%'];
            }
        }
        if (propJson.value.yAxisIsAddUnit) {
            let valueInfo = "{value} " + propJson.value.yAxisUnitInfo
            yAxis.axisLabel = {
                //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
                formatter: valueInfo
            }
        }
        chartOption.value = {
            title: titleInfo,
            toolbox: toolboxInfo,
            grid: gridInfo,
            xAxis: [xAxis],
            yAxis: [yAxis]
        }
        if (propJson.value.isAddToolTip) {
            chartOption.value.tooltip = toolTipInfo
        }
        if (propJson.value.isAddLegend) {
            let awaitObj = {}
            await doThirdServiceValue(propJson.value.legendData, commonParam.value, execLegendThen, () => {}, awaitObj)
            chartOption.value.legend = {
                data: awaitObj.data
            }
        }
        let awaitObj = {}
        await doThirdServiceValue(propJson.value.chartDataValue, commonParam.value, execChartDataThen, () => {}, awaitObj)
        while (!chartData.value) {
            await sleep(1)
        }
        let tempList = chartData.value
        let resSeriesList = []
        for (let index = 0; index < tempList.length; index++) {
            let tempSourceInfo = tempList[index]
            let tempInfo = {
                type: 'line',
                data: tempSourceInfo.data
            }
            if (propJson.value.isAddAreaStyle) {
                tempInfo.areaStyle = {};
            }
            if (propJson.value.isAddAreaLight) {
                tempInfo.emphasis = {
                    focus: propJson.value.areaLightType
                }
            }
            if (propJson.value.isSmooth) {
                tempInfo.smooth = true;
            }
            // 判断是否为多数据
            if (propJson.value.isAddLegend) {
                tempInfo.name = tempSourceInfo.name
            }
            resSeriesList.push(tempInfo)
        }
        chartOption.value.series = resSeriesList;
        // 绘制图表
        myChart.value.setOption(chartOption.value);
    })
}
</script>

<style scoped lang="less">
</style>